<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border属性说明</title>
    <style>

        /*
        注意:
            1. 在CSS中，可以使用以下属性为不同的边指定不同的边框：border-top-style，border-right-style，border-bottom-style 和 border-left-style。
            2. border属性等于: border-style, border-color, border-size
        */

        /*设置无边框*/
        .none {border-style: none;}
        /*设置实线边框*/
        .solid {border-style: solid;}

        /*这些边框效果请打开浏览器查看*/
        .dotted {border-style: dotted;}
        .dashed {border-style: dashed;}
        .double {border-style: double;}
        .groove {border-style: groove;}
        .ridge {border-style: ridge;}
        .inset {border-style: inset;}
        .outset {border-style: outset;}
        .hidden {border-style: hidden;}

    </style>
</head>
<body>
<p class="none">w3cschool</p>
<p class="solid">w3cschool</p>
<p class="dotted">w3cschool</p>
<p class="dashed">w3cschool</p>
<p class="double">w3cschool</p>
<p class="groove">w3cschool</p>
<p class="ridge">w3cschool</p>
<p class="inset">w3cschool</p>
<p class="outset">w3cschool</p>
<p class="hidden">w3cschool</p>
</body>
</html>